<template>
  <section class="msite">
      <!--首页导航-->
                <HeaderTop   v-bind:titles='title'>
                        <template slot="left">
                          <a class="header_search">
                          <i class="iconfont icon-sousuo"></i>
                          </a>
                        </template>

                        <template   slot="right">

                          <router-link slot="login" :to="userInfo._id?'/userinfo':'/login'"  class="header_login">
                          <!-- <router-link class="header_login" to='/login'> -->
                          <!-- {{userInfo._id ? '已经登录' :'登录|注册'}} -->
                          <span class="header_login_text">  {{userInfo._id ? '已经登录' :'登录|注册'}} </span>
                          </router-link >
                        </template>
                </HeaderTop>

    <!-- 首页占位符  轮播图-->
    <MsiteNav v-bind:categorys='categorys'></MsiteNav>

    <!--首页附近商家-->
    <div class="msite_shop_list">
      <div class="shop_header">
        <i class="iconfont icon-xuanxiang"></i>
        <span class="shop_header_title">附近商家</span>
      </div>
      <!-- 占位符   商品展示-->
      <ShopList  :shops='shops'>

      </ShopList>
    </div>
  </section>
</template>

<script>
import MsiteNav from "../../components/MsiteNav/MsiteNav";
import ShopList from "../../components/ShopList/ShopList";
import HeaderTop from "../../components/HeaderTop/HeaderTop";



import  {mapActions,mapState} from 'vuex'
export default {
  name: "",
  data() {
    return {
      title:'武汉饿了么'
    };
  },


// {latitude,longitude}
    mounted() {
      
      this.getCategorys()


 let   {latitude,longitude}=this;
 console.log(latitude,longitude)

      this.getShops( {latitude,longitude})
        // this.$store.dispatch('getCategorys')
  },


  computed: {
    ...mapState(['categorys','latitude','longitude','shops','userInfo'])
  },





  methods: {
    ...mapActions(['getCategorys','getShops'])

  },
  components: {
    MsiteNav,
    ShopList,
    HeaderTop,
  },
};
</script>

<style scoped  lang='stylus'>
@import '../../common/stylus/mixins.styl';

.msite { // 首页
  width: 100%;

  .msite_shop_list {
    top-border-1px(#e4e4e4);
    margin-top: 10px;
    background: #fff;

    .shop_header {
      padding: 10px 10px 0;

      .shop_icon {
        margin-left: 5px;
        color: #999;
      }

      .shop_header_title {
        color: #999;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
}
</style>